<template>
  <div class="music-warp">
    <PageHeader />
    <div class="music-container">
      <div class="music-search">
        <input v-model="keyword" type="text" class="music-search-input" placeholder="网易云音乐歌单ID" @keypress.enter="getSongSheet(keyword)">
        <button type="button" class="music-search-btn" @click="getSongSheet(keyword)">搜索</button>
      </div>
      <div class="music-content music-clear">
        <svg-loading />
        <div class="music-list-warp">
          <div v-for="(item,i) in musicLists" :key="i" class="music-list-item" :class="{active:item.id===listDetail.id}" @click="getSongSheet(item.id)">
            <div class="music-list-cover">
              <img :src="item.image" alt="">
            </div>
            <div class="music-list-info">
              <div class="music-list-name">{{ item.title }}</div>
              <div class="music-list-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="music-list-detail">
          <div class="music-list-item">
            <div class="music-list-cover">
              <img :src="listDetail.image" alt="">
            </div>
            <div class="music-list-info">
              <div class="music-list-name">{{ listDetail.title }}</div>
              <div class="music-list-desc">{{ listDetail.desc }}</div>
            </div>
          </div>
          <div class="music-list-songs">
            <table class="music-table">
              <thead>
                <tr>
                  <td width="40" />
                  <td><span class="music-name-td">歌名</span></td>
                  <td width="60" />
                  <td>歌手</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,i) in listDetail.list" :key="i">
                  <td>{{ i+1 }}</td>
                  <td>
                    <div class="music-song-title" :class="{active:curSong.id===item.id}">
                      <span class="iconfont icon-music" />
                      {{ item.title }}
                    </div>
                  </td>
                  <td>
                    <div class="music-song-control">
                      <span class="iconfont icon-play" title="播放" @click="playSong(item)" />
                      <span class="iconfont icon-folder" title="收藏到播放列表" @click="collectSong(item)" />
                    </div>
                  </td>
                  <td>{{ item.author }}</td>
                </tr>
                <tr v-if="listDetail.list.length===0">
                  <td colspan="4" align="center">
                    暂无数据
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="music-player-warp">
      <div class="music-player-container">
        <div class="music-player-panel music-clear">
          <div class="music-player-menu">
            <div class="music-player-menu-item music-player-voice-menu">
              <div class="music-player-voice-warp">
                <UiProgress direction="vertical" :progress="volume" :sync="true" @progress-change="changeVolume" />
              </div>
              <span class="iconfont" :class="volume===0?'icon-mute':'icon-voice'" />
            </div>
            <div class="music-player-menu-item">
              <span class="iconfont icon-menu" @click="isPanel=!isPanel" />
            </div>
          </div>
          <div class="music-player-control">
            <span class="iconfont icon-prev" title="上一曲" @click="prevSong" />
            <span class="iconfont icon-toggle-play" :title="isPaused?'播放':'暂停'" :class="isPaused?'icon-play':'icon-pause'" @click="togglePlay" />
            <span class="iconfont icon-next" title="下一曲" @click="nextSong" />
          </div>
          <div class="music-player-info music-clear">
            <div class="music-player-cover">
              <img :src="curSong.image || 'http://p2.music.126.net/KK2fyHMit2saFMMMDUfJ3w==/109951164249516600.jpg'" alt="">
              <img v-if="!isPaused&&!isError" src="../../assets/wave.gif" alt="" class="music-playing-icon">
              <span v-if="isError" class="iconfont icon-error music-error-icon" />
            </div>
            <div class="music-player-info-warp">
              <div class="music-song-info-row">
                {{ curSong.title }}-{{ curSong.author }}
                <span v-if="isPanel" class="music-cur-lyric">{{ curLyric.text }}</span>
              </div>
              <div class="music-player-time-control">
                <div class="music-player-time">{{ curTime | fmtTime }}/{{ duration | fmtTime }}</div>
                <div class="music-player-time-warp">
                  <UiProgress :progress="played" :preload="preload" @progress-change="changeTime" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="music-panel" :class="{'music-hide':isPanel}">
          <div class="music-panel-left">
            <div class="music-panel-header">
              <span>歌曲列表({{ playList.length }})</span>
            </div>
            <div class="music-panel-body">
              <div class="music-song-list scroll">
                <div v-for="(item,i) in playList" :key="i" class="music-song-item" :class="{active:curSong.id===item.id}">
                  <span class="iconfont icon-bofang" />
                  <div class="music-song-info-warp">{{ i+1 }}.{{ item.title }}-{{ item.author }}</div>
                  <div class="music-song-control-warp">
                    <span class="iconfont icon-play" title="播放" @click="playSong(item)" />
                    <span v-if="i!==0" class="iconfont icon-up" title="上移" @click="moveUp(item)" />
                    <span v-if="i!==(playList.length-1)" class="iconfont icon-down" title="下移" @click="moveDown(item)" />
                    <span class="iconfont icon-delete" title="删除" @click="deleteSong(item)" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="music-panel-right">
            <div class="music-panel-header">
              <div class="music-curSong-text">{{ curSong.title }}</div>
              <span class="iconfont icon-close" @click="isPanel=true" />
            </div>
            <div class="music-panel-body">
              <div class="music-lyric-bg" :style="{backgroundImage:'url('+(curSong.image)+')'}" />
              <UiLyric :source-lyric="lrcSource" :offset="1" class="music-lyric" :cur-time="curTime" :loading="loading" @lrc-change="changeLyric" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <audio ref="audio" />
  </div>
</template>

<script>
import Message from '../../components/Message'
import UiProgress from '../../components/UiProgress'
import UiLyric from '../../components/UiLyric'
import Confirm from '../../components/Confirm'
import PageHeader from '../../components/PageHeader'
import SvgLoading from './components/svg-loading'
export default {
  name: 'App',
  components: { UiProgress, UiLyric, PageHeader, SvgLoading },
  filters: {
    fmtTime(value) {
      const m = Math.floor(value / 60)
      const s = parseInt(value % 60)
      const mm = m > 9 ? m : '0' + m
      const ss = s > 9 ? s : '0' + s
      return mm + ':' + ss
    }
  },
  data() {
    return {
      musicLists: [
        {
          id: 19723756,
          title: '云音乐飙升榜',
          author: '网易云音乐',
          image: 'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg',
          desc: '云音乐中每天热度上升最快的100首单曲，每日更新。'
        },
        {
          id: 3778678,
          title: '云音乐热歌榜',
          author: '网易云音乐',
          image: 'http://p2.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091.jpg',
          desc: '云音乐热歌榜：云音乐用户一周内收听所有线上歌曲 官方TOP排行榜，每周四更新。'
        },
        {
          id: 71384707,
          title: '云音乐古典音乐榜',
          author: '网易云音乐',
          image: 'http://p1.music.126.net/BzSxoj6O1LQPlFceDn-LKw==/18681802069355169.jpg',
          desc: '云音乐用户一周内收听所有古典音乐官方TOP排行榜，每周四更新。'
        },
        {
          id: 2250011882,
          title: '抖音排行榜',
          author: '抖音排行榜',
          image: 'http://p1.music.126.net/bZvjH5KTuvAT0YXlVa-RtQ==/109951163326845001.jpg',
          desc: '来自抖音的官方热歌排行'
        },
        {
          id: 21845217,
          title: 'KTV唛榜',
          author: 'KTV唛榜',
          image: 'http://p1.music.126.net/H4Y7jxd_zwygcAmPMfwJnQ==/19174383276805159.jpg',
          desc: 'KTV唛榜是目前国内首个以全国超过200家KTV点歌平台真实数据的当红歌曲榜单。唛榜每周五更新。'
        },
        {
          id: 2006508653,
          title: '电竞音乐榜',
          author: '空虚小编',
          image: 'http://p2.music.126.net/CUqQp33MZf_m0BwH4u0V6A==/109951163078922993.jpg',
          desc: '无音乐，不游戏。人气电竞主播联手推荐，最热最潮电竞歌曲榜单，电竞迷们的必备收藏！'
        },
        {
          id: 545888750,
          title: '新潮流行',
          author: 'cleverqin',
          image: 'http://p2.music.126.net/LWmhB3XX8szN3V9TU-A5UA==/3390893862255408.jpg',
          desc: '我最爱听的几首歌'
        }
      ],
      curSong: {},
      listDetail: {
        image: 'http://p2.music.126.net/KK2fyHMit2saFMMMDUfJ3w==/109951164249516600.jpg',
        list: []
      },
      searching: false,
      playList: [],
      lrcSource: '',
      loading: false,
      isPaused: true,
      duration: 0,
      curTime: 0,
      played: 0,
      preload: 0,
      volume: 0.5,
      isError: false,
      isPanel: true,
      curLyric: {},
      keyword: ''
    }
  },
  mounted() {
    this.initAudio()
    this.getSongSheet(545888750)
  },
  methods: {
    getSongSheet(sheetId) {
      this.searching = true
      this.$http.jsonp('https://api.asilu.com/cloud-music/163?type=playlist&id=' + sheetId)
        .then((response) => {
          if (response.body.id) {
            this.listDetail = response.body
            const list = Object.assign([], response.body.list)
            if (this.playList.length === 0) {
              this.playList = list
              this.changeSong(list[0])
            }
          } else {
            Message.warning('未查相关的歌单信息！')
          }
        }).finally(() => {
          this.searching = false
        }).catch(() => {
          Message.error('查询歌单出错了！', 'error')
        })
    },
    getLrc(id) {
      this.loading = true
      this.$http.get('https://api.asilu.com/163music/?type=songlrc&lrc=lrc&id=' + id)
        .then((response) => {
          const body = response.body ? response.body : response.bodyText
          this.lrcSource = body
          this.loading = false
        }).catch(() => {
          this.lrcSource = ''
          this.loading = false
        })
    },
    initAudio() {
      const $audio = this.$refs['audio']
      if ($audio) {
        this.$audio = $audio
        $audio.volume = this.volume
        $audio.onpause = () => {
          this.isPaused = true
        }
        $audio.onplay = () => {
          this.isPaused = false
        }
        $audio.ontimeupdate = () => {
          const time = $audio.currentTime
          this.curTime = time
          this.played = time / $audio.duration
        }
        $audio.onended = () => {
          this.nextSong()
          $audio.play()
        }
        $audio.onerror = () => {
          this.isPaused = true
          this.isError = true
          Message.error('歌曲《' + this.curSong.title + '》加载出错了！')
        }
        $audio.onloadedmetadata = () => {
          this.duration = $audio.duration
        }
        $audio.ondurationchange = () => {
          this.duration = $audio.duration
        }
        $audio.onprogress = () => {
          const len = $audio.buffered.length
          if (len <= 0) {
            return
          }
          const time = $audio.buffered.end(len - 1)
          this.preload = time / $audio.duration
        }
      }
    },
    changeSong(song) {
      if (song.id === this.curSong.id) {
        return
      }
      this.duration = 0
      this.curTime = 0
      this.preload = 0
      this.played = 0
      this.isError = false
      if (this.$audio) {
        this.$audio.src = 'https://music.163.com/song/media/outer/url?id=' + song.id + '.mp3'
      }
      this.curSong = song
      this.getLrc(song.id)
      if ('mediaSession' in navigator) {
        navigator.mediaSession.metadata = new window.MediaMetadata({
          title: song.title,
          artist: song.author,
          album: song.title,
          artwork: [
            { src: song.image, sizes: '256x256', type: 'image/jpg' }
          ]
        })
      }
    },
    togglePlay() {
      if (this.isPaused) {
        this.$audio.play()
      } else {
        this.$audio.pause()
      }
    },
    changeTime(val) {
      this.played = val
      this.curTime = val * this.duration
      if (this.$audio) {
        this.$audio.currentTime = val * this.$audio.duration
      }
    },
    changeVolume(val) {
      this.volume = val
      if (this.$audio) {
        this.$audio.volume = val
      }
    },
    playSong(song) {
      this.changeSong(song)
      if (this.$audio) {
        this.$audio.play()
      }
    },
    findIndex(song) {
      let index = -1
      this.playList.forEach((item, i) => {
        if (item.id === song.id) {
          index = i
        }
      })
      return index
    },
    prevSong() {
      const len = this.playList.length
      const index = this.findIndex(this.curSong)
      const isPaused = this.$audio.paused
      if (len > 0) {
        const prevIndex = index - 1
        if ((prevIndex >= 0) && (prevIndex < len)) {
          const song = this.playList[prevIndex]
          this.changeSong(song)
        } else {
          const song = this.playList[len - 1]
          this.changeSong(song)
        }
        if (!isPaused) {
          this.$audio.play()
        }
      }
    },
    nextSong() {
      const len = this.playList.length
      const index = this.findIndex(this.curSong)
      const isPaused = this.$audio.paused
      if (len > 0) {
        const nextIndex = index + 1
        if ((nextIndex >= 0) && (nextIndex < len)) {
          const song = this.playList[nextIndex]
          this.changeSong(song)
        } else {
          const song = this.playList[0]
          this.changeSong(song)
        }
        if (!isPaused) {
          this.$audio.play()
        }
      }
    },
    moveUp(song) {
      const index = this.findIndex(song)
      if (index !== -1) {
        const prevIndex = index - 1
        if (prevIndex >= 0) {
          const prevSong = this.playList[prevIndex]
          this.$set(this.playList, prevIndex, song)
          this.$set(this.playList, index, prevSong)
        }
      }
    },
    moveDown(song) {
      const index = this.findIndex(song)
      const len = this.playList.length
      if (index !== -1) {
        const nextIndex = index + 1
        if (nextIndex < len) {
          const nextSong = this.playList[nextIndex]
          this.$set(this.playList, nextIndex, song)
          this.$set(this.playList, index, nextSong)
        }
      }
    },
    deleteSong(song) {
      const index = this.findIndex(song)
      if (index !== -1) {
        Confirm('是否要删除歌曲《' + song.title + '》？')
          .then(() => {
            this.playList.splice(index, 1)
            Message.success('歌曲《' + song.title + '》删除成功！')
          }).catch(() => {

          })
      }
    },
    collectSong(song) {
      const index = this.findIndex(song)
      if (index === -1) {
        this.playList.push(song)
        Message.success('歌曲《' + song.title + '》收藏成功！')
      }
    },
    changeLyric(lyric) {
      this.curLyric = lyric
    }
  }
}
</script>
<style lang="less">
  html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>
<style lang="less" scoped>
  @bg-color:#2d2d2d;
  @hover-bg:rgba(0,0,0,0.3);
  @font-color:#c0c0c0;
  @hover-font-color:#ffffff;
  .music-warp{
    width: 100%;
    min-height: 100%;
    background-color: #f7f7f7;
    padding-top: 50px;
    box-sizing: border-box;
  }
  .music-clear:after,
  .music-list-item:after,
  .music-panel:after{
    display: table;
    content: "";
    clear: both;
  }
  .music-container{
    width: 1000px;
    margin: 0 auto;
    padding: 15px 20px 75px;
    background-color: #ffffff;
    box-sizing: border-box;
    position: relative;
  }
  .music-content{
    position: relative;
  }
  .music-searching{
    display: block;
    position: absolute;
    height: 10px;
    width: 40px;
    left: 50%;
    top: 15px;
    margin-left: -20px;
  }
  .music-search{
    margin-bottom: 15px;
  }
  .music-search-input{
    line-height: 20px;
    padding: 7px 10px;
    font-size: 14px;
    outline: none;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    color: #333333;
    margin-right: 10px;
    width: 240px;
    box-sizing: content-box;
  }
  .music-search-input:focus {
    border: 1px solid #138af9;
    box-shadow: 0 0 3px rgba(19, 138, 249, 0.54);
  }
  .music-search-btn {
    box-sizing: content-box;
    line-height: 20px;
    padding: 7px 15px;
    font-size: 14px;
    border: 1px solid #138af9;
    border-radius: 4px;
    color: #ffffff;
    background-color: #138af9;
    cursor: pointer;
    outline: none;
  }
  .music-list-item{
    padding: 10px;
    height: 40px;
    box-sizing: content-box;
  }
  .music-list-cover{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    float: left;
  }
  .music-list-cover img{
    display: block;
    width: 100%;
    height:100%;
    border-radius: 4px;
  }
  .music-list-info{
    margin-left: 50px;
  }
  .music-list-name{
    line-height: 20px;
    font-size: 14px;
    height: 20px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .music-list-desc{
    line-height: 20px;
    font-size: 12px;
    height: 20px;
    color: #999999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .music-list-warp{
    width: 260px;
    float: left;
  }
  .music-list-warp .music-list-item{
    cursor: pointer;
  }
  .music-list-warp .music-list-item:hover{
    background-color: #f2f2f2;
  }
  .music-list-warp .music-list-item.active{
    background-color: #f2f2f2;
  }
  .music-list-detail{
    margin-left: 260px;
  }
  .music-list-songs{
    padding: 10px;
  }
  .music-table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d1d1d1;
  }
  .music-table thead td{
    font-size: 14px;
    color: #333;
    padding: 5px 10px;
    line-height: 20px;
    min-height: 20px;
  }
  .music-table thead tr{
    background-image: linear-gradient(#ececec,#e2e2e2,#ececec);
  }
  .music-table tbody td{
    font-size: 12px;
    color: #333;
    padding: 5px 10px;
    line-height: 20px;
    min-height: 20px;
  }
  .music-table tbody tr:nth-child(odd){
    background-color: #f7f7f7;
  }
  .music-table tbody tr{
    cursor: pointer;
  }
  .music-table tbody tr:hover{
    background-color: #f2f2f2;
  }
  .music-song-title{
    line-height: 20px;
    padding-left: 25px;
    position: relative;
  }
  .music-name-td{
    padding-left: 25px;
  }
  .music-song-title span.icon-music{
    display: none;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    color: #e64b15;
    position: absolute;
    left: 0;
    top: 0;
  }
  .music-song-title.active span.icon-music{
    display: block;
  }
  .music-song-control {
    width: 50px;
    opacity: 0;
    visibility: hidden;
  }
  .music-table tbody tr:hover .music-song-control{
    opacity: 1;
    visibility: visible;
  }
  .music-song-control span.iconfont{
    display: inline-block;
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #9a9a9a;
    cursor: pointer;
    margin-right: 3px;
  }
  .music-song-control span.iconfont:hover{
    color: #e64b15;
  }
  .music-song-control span.icon-folder:hover{
    color: #3298e6;
  }
  .music-player-warp{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @bg-color;
  }
  .music-player-container{
    width: 1000px;
    margin: 0 auto;
    position: relative;
  }
  .music-player-panel{
    padding: 10px 0;
    position: relative;
  }
  .music-player-control{
    height: 40px;
    width: 120px;
    float: left;
  }
  .music-player-control span.iconfont{
    display: block;
    width: 40px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    cursor: pointer;
    color: @font-color;
  }
  .music-player-control span.iconfont:hover{
    color: @hover-font-color;
  }
  .music-player-control span.icon-toggle-play{
    font-size: 30px;
  }
  .music-player-info{
    height: 40px;
    margin-left: 120px;
    margin-right: 80px;
  }
  .music-player-cover{
    height: 40px;
    width: 40px;
    border-radius: 4px;
    float: left;
    position: relative;
  }
  .music-error-icon{
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    font-size: 12px;
    bottom: 0;
    right: 2px;
    color: #e64b15;
    background-color: #ffffff;
    border-radius: 6px;
  }
  .music-player-cover img.music-playing-icon{
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    bottom: 0;
    right: 2px;
    border-radius: 0;
  }
  .music-player-cover img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }
  .music-player-info-warp{
    margin-left: 50px;
  }
  .music-song-info-row{
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: @font-color;
  }
  .music-song-info-row span.music-cur-lyric{
    margin-left: 20px;
    font-size: 12px;
    color: #e6700e;
  }
  .music-player-time-control{
    height: 20px;
  }
  .music-player-time{
    width: 74px;
    padding: 0 3px;
    font-size: 12px;
    color: @font-color;
    float: right;
    box-sizing: content-box;
  }
  .music-player-time-warp{
    height: 4px;
    padding: 8px 0;
    margin-right: 85px;
  }
  .music-player-menu{
    width: 80px;
    float: right;
  }
  .music-player-menu-item{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    float: left;
  }
  .music-player-menu-item span{
    font-size: 25px;
    color: @font-color;
    cursor: pointer;
  }
  .music-player-menu-item span:hover{
    color: @hover-font-color;
  }
  .music-player-voice-menu{
    position: relative;
  }
  .music-player-voice-warp{
    width: 4px;
    height: 80px;
    padding: 15px 10px 20px;
    bottom: 100%;
    left: 50%;
    margin-left: -12px;
    background-color: @hover-bg;
    border-radius: 4px;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
  }
  .music-player-voice-menu:hover .music-player-voice-warp{
    opacity: 1;
    visibility: visible;
  }
  .music-panel{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 100%;
  }
  .music-panel-left{
    width: 50%;
    float: left;
  }
  .music-panel-right{
    width: 50%;
    float: left;
  }
  .music-panel-header{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background-color: #343434;
    padding: 0 10px;
    position: relative;
    color: @font-color;
  }
  .music-panel-left .music-panel-header{
    border-radius: 4px 0 0 0;
  }
  .music-panel-right .music-panel-header{
    border-radius:0 4px 0 0;
  }
  .music-panel-body{
    height: 260px;
    background-color: @bg-color;
    position: relative;
  }
  .music-lyric-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    opacity: .2;
    filter: blur(20px);
  }
  .music-song-list{
    height: 100%;
    overflow-y: auto;
  }
  .music-song-item{
    padding-left: 30px;
    padding-right: 95px;
    height: 30px;
    line-height: 30px;
    position: relative;
  }
  .music-song-info-warp{
    font-size: 12px;
    color: @font-color;
  }
  .music-song-item span.icon-bofang{
    position: absolute;
    display: none;
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: #e64b15;
    left: 0;
    text-align: center;
    line-height: 30px;
  }
  .music-song-item.active span.icon-bofang{
    display: block;
  }
  .music-song-control-warp{
    width: 90px;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
  }
  .music-song-control-warp span.iconfont{
    display: block;
    width: 20px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: @font-color;
    float: left;
    cursor: pointer;
  }
  .music-song-control-warp span.iconfont:hover{
    color: @hover-font-color;
  }
  .music-song-item:hover{
    background-color: @hover-bg;
  }
  .music-song-item.active{
    background-color: @hover-bg;
  }
  .music-song-item:hover .music-song-control-warp{
    display: block;
  }
  .music-curSong-text{
    text-align: center;
  }
  .music-panel-header span.icon-close{
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    right: 10px;
    top: 10px;
    color: @font-color;
    cursor: pointer;
    border-radius: 4px;
  }
  .music-panel-header span.icon-close:hover{
    background-color: @hover-bg;
    color: @hover-font-color;
  }
  .music-hide{
    opacity: 0;
    visibility: hidden;
  }
  .music-lyric/deep/ .ui-lyric-item{
    font-size: 14px;
    line-height: 28px;
    color: #8b8b8b;
  }
  .music-lyric/deep/ .ui-lyric-item.active{
    color: #e6700e;
  }
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  .scroll::-webkit-scrollbar{
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.13);
  }
  /*定义滚动条的轨道，内阴影及圆角*/
  .scroll::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(240, 240, 240, 0);
    border-radius: 10px;
    background-color: rgba(0, 89, 255, 0);
  }
  /*定义滑块，内阴影及圆角*/
  .scroll::-webkit-scrollbar-thumb{
    /*width: 10px;*/
    height: 20px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(236, 236, 236, 0.3);
    background-color: rgba(203, 203, 203, 0.54);
    transition: all 0.5s;
  }
</style>
